<template>
  <div style="width:100%;  " v-for="(item,index) in tableData" :key="item.id">
  <el-card :body-style="{ margin:'10px 10px',background: '#FFFFFF',display: 'flex' }">
    <div style="height: 100%;width:150px ">
      <el-image style="width: 100px; height: 100px" :src="item.cover" fit="fit" />
    </div>
    <div style="margin: 0 10px;width: 900px">
      <h1>比赛名称:{{item.gameName}}</h1>
      <p>主持人:<strong>{{item.master}}</strong></p>
      <p>简介:{{item.description}}</p>
    </div>
    <div>
        <el-container #default="scope">
          <el-button type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button :icon="Remove" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </el-container>
    </div>
  </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import { Edit,Remove,CirclePlus,Upload,Download,Search,Refresh,View,CircleClose } from '@element-plus/icons-vue';
import {getGameList} from "@/api/api";
import {ElMessage} from "element-plus";
export default {
  setup(){
    return{
      Edit,
      Remove,
      CirclePlus,
      Upload,
      Download,
      Search,
      Refresh,
      View,
      CircleClose
    }
  },
  components: {Edit},
  name: "test",
  data(){
    return{
      tableData:[],
      total:'0',
      form:{},

    }
  },
  created() {
    this.load()

  },
  methods:{
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true
      this.$refs["upload"].clearFiles()
    },
    load() {
      const params= {
      }
      getGameList(params).then(res => {
        console.log(res.records)
        this.tableData = res.records;
        this.total = res.total
      })
    },
    handleDelete(id){
      request.delete("/game/"+id).then(res => {
        if (res){
          ElMessage({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: "删除失败"
          })
        }
        this.load()//重新加载
      });
    }
  },

}


</script>

<style scoped>
p{
  margin:10px 10px
}
</style>